<template>
  <div class="sale_forecast_div">
    <div class="connect_div">
      <div class="form_one">
        <div class="input_div">
          <p-range-picker
            :placeholder="['开始时间', '结束时间']"
            format="YYYY-MM-DD"
            :mode="mode"
            :value="value"
            :allow-clear="false"
            class="input"
            @change="handleChange"
          />
          <span class="label">查询周期</span>
        </div>
        <div class="input_div">
          <SelectOrg
            :value="form.salesOrganization"
            class="input"
            :allow-clear="false"
            @input="handleOrgChange"
          />
          <span class="label">销售组织</span>
        </div>
        <div class="input_div">
          <SelectOrg
            v-model="form.salesGroup"
            class="input"
            :parent-id="parentId"
            :options="orgGroupOptions"
            @input="changeHandle"
          />
          <span class="label">销售组</span>
        </div>
        <div class="search_div">
          <p-button class="button" type="primary" @click="handleSearch">
            搜索
          </p-button>
          <p-button class="button" @click="handleReset"> 重置 </p-button>
          <p-button class="button" @click="exportList"> 导出 </p-button>
        </div>
      </div>
      <div class="form_one">
        <div class="input_div">
          <p-input v-model="form.salesResponsible" class="input" />
          <span class="label">销售责任人</span>
        </div>
        <div class="input_div" />
        <div class="input_div" />
        <div class="search_div" />
      </div>
    </div>
  </div>
</template>

<script>
import monent from 'moment';

const defaultForm = {
  salesOrganization: undefined,
  endTime: '',
  salesGroup: undefined,
  startTime: '',
  salesResponsible: undefined,
};
export default {
  data() {
    return {
      form: { ...defaultForm },
      mode: ['date', 'date'],
      value: [],
      parentId: '',
    };
  },
  computed: {
    orgGroupOptions() {
      return this.$store.getters.getOrg({
        code: this.parentId,
        type: 'sales',
        isDict: false,
      });
    },
  },
  created() {
    this.getTime();
  },
  methods: {
    getTime() {
      const date = new Date();
      this.form.endTime = monent(date)
        .endOf('day')
        .format('YYYY-MM-DD HH:mm:ss');
      this.form.startTime = monent()
        .subtract(6, 'months')
        .startOf('day')
        .format('YYYY-MM-DD HH:mm:ss');
      this.value = [this.form.startTime, this.form.endTime];
    },
    exportList() {
      this.$emit('down-table-list');
    },
    handleSearch() {
      this.$emit('search', this.form);
    },
    changeHandle(val) {
      this.form.salesGroup = val;
    },
    async handleOrgChange(val) {
      this.form.salesOrganization = val;
      this.form.salesGroup = '';
      this.orgGroupOptions = [];
      if (!val) return;
      this.parentId = val;
    },
    handleChange(value) {
      console.log('value: ', value);
      this.value = value;
      this.form.endTime =
        monent(value[1]).format('YYYY-MM-DD') + ' ' + '23:59:59';
      this.form.startTime =
        monent(value[0]).format('YYYY-MM-DD') + ' ' + '00:00:00';
    },
    handleReset() {
      this.form = {
        ...defaultForm,
      };
      console.log('this.form: ', this.form);

      this.getTime();
      this.$emit('search', true);
    },
    // handlePanelChange2(value, mode) {
    //   console.log('mode: ', mode);
    //   this.value = value;
    //   this.mode2 = [
    //     mode[0] === 'date' ? 'month' : mode[0],
    //     mode[1] === 'date' ? 'month' : mode[1],
    //   ];

    // },
  },
};
</script>

<style lang="less" scope>
.sale_forecast_div {
  .connect_div {
    width: 100%;
    background-color: #f7f7f8;
    height: 100px;
    margin-bottom: 20px;
  }

  .form_one {
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-around;
  }
  .input_div {
    width: 25% !important;
    line-height: 30px;
    margin-top: 13px;
  }
  .search_div {
    width: 18.5% !important;
    line-height: 30px;
    margin-top: 13px;
  }

  .input {
    width: 73% !important;
    float: right;
  }
  .label {
    float: right;
    margin-right: 10px;
  }
  .button {
    margin-left: 10px;
    height: 32px !important;
  }
}
</style>